import { defineComponent, computed, CSSProperties } from 'vue';
import { cn } from '@/lib/utils';

// 闪光按钮

export interface ShimmerButtonProps {
	shimmerColor?: string;
	shimmerSize?: string;
	borderRadius?: string;
	shimmerDuration?: string;
	background?: string;
	class?: string;
}

export default defineComponent({
	name: 'ShimmerButton',
	props: {
		shimmerColor: { type: String, default: '#ffffff' },
		shimmerSize: { type: String, default: '0.05em' },
		shimmerDuration: { type: String, default: '3s' },
		borderRadius: { type: String, default: '100px' },
		background: { type: String, default: 'rgba(0, 0, 0, 1)' },
		class: { type: String, default: '' },
	},
	setup(props, { slots }) {
		const buttonStyle = computed(
			() =>
				({
					'--spread': '90deg',
					'--shimmer-color': props.shimmerColor,
					'--radius': props.borderRadius,
					'--speed': props.shimmerDuration,
					'--cut': props.shimmerSize,
					'--bg': props.background,
				} as CSSProperties)
		);

		return () => (
			<button
				style={buttonStyle.value}
				class={cn(
					'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',
					'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
					props.class
				)}
			>
				{/* spark container */}
				<div
					class={cn(
						'-z-30 blur-[2px]',
						'absolute inset-0 overflow-visible [container-type:size]'
					)}
				>
					{/* spark */}
					<div class="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]">
						{/* spark before */}
						<div class="animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
					</div>
				</div>
				{slots.default?.()}

				{/* Highlight */}
				<div
					class={cn(
						'insert-0 absolute size-full',
						'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
						'transform-gpu transition-all duration-300 ease-in-out',
						'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
						'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
					)}
				/>

				{/* backdrop */}
				<div
					class={cn(
						'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
					)}
				/>
			</button>
		);
	},
});
